/*
 * @Author: wangtao
 * @Date: 2021-02-18 11:21:01
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-17 19:13:12
 * @Description: file content
 */
import React from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
} from 'react-native';
import {
  Button,
  msg,
} from '@/common';
import {
  mainBgColorLightGray,
  px2dp,
} from '@/styles';
import api from '@/api';
import ApplyInfo from './components/apply-info';
import CarBoastInfo from './components/car-boast-info';
import CertWrap from './components/cert-wrap';

const { Submit } = Button;

export default class InsuranceUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      applicationInsuranceDetail: {}, // 申请详情
      insurCommercialFlag: 'Y', // 商业险标识 N  Y
      insurCommercialAmount: null, // 商业险保费合计金额
      insurCompulsoryFlag: 'N', // 交强险标识 N  Y
      insurCompulsoryAmount: null, // 交强险保费合计金额
      insurAmount: null, // 保费总计(商业 + 交强险)
      taxAmount: null, // 车船税总计
      insurAllAmount: null, // 保费总计+车船税总计
      policyUrls: [], // 保单附件
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { applicationInsuranceDetailId } = params;
    this.getApplicationInsuranceDetail(applicationInsuranceDetailId);
  }

  componentWillUnmount() {}

  render() {
    const {
      applicationInsuranceDetail,
      insurCommercialFlag,
      insurCommercialAmount,
      insurCompulsoryFlag,
      insurCompulsoryAmount,
      insurAmount,
      taxAmount,
      insurAllAmount,
      policyUrls,
    } = this.state;
    if (!applicationInsuranceDetail.id) {
      return null;
    }
    return (
      <View style={styles.container}>
        <ScrollView
          contentContainerStyle={styles.scrollContainer}
          showsVerticalScrollIndicator={false}
        >
          <ApplyInfo
            applicationInsuranceDetail={applicationInsuranceDetail}
            insurCommercialFlag={insurCommercialFlag}
            insurCommercialAmount={insurCommercialAmount}
            insurCompulsoryFlag={insurCompulsoryFlag}
            insurCompulsoryAmount={insurCompulsoryAmount}
            insurAmount={insurAmount}
            taxAmount={taxAmount}
            onChange={this.onChange}
          />
          <CarBoastInfo
            taxAmount={taxAmount}
            insurAmount={insurAmount}
            insurAllAmount={insurAllAmount}
            onChange={this.onChange}
          />
          <CertWrap policyUrls={policyUrls} onChange={this.onChange} />
          <Submit
            text='上传电子保单'
            boxStyle={{
              width: px2dp(640),
              height: px2dp(96),
              borderRadius: px2dp(12),
              overflow: 'hidden',
              marginTop: px2dp(32),
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(36),
            }}
            onClick={() => {
              this.submit();
            }}
          />
        </ScrollView>
      </View>
    );
  }

  submit = () => {
    const {
      applicationInsuranceDetail,
      insurCommercialFlag,
      insurCommercialAmount,
      insurCompulsoryFlag,
      insurCompulsoryAmount,
      insurAmount,
      taxAmount,
      insurAllAmount,
      policyUrls,
    } = this.state;

    if (insurCommercialFlag == 'N' && insurCompulsoryFlag == 'N') {
      msg.emit('app:tip', { text: '商业险和交强险至少选择一种' });
      return;
    }
    if (insurCommercialFlag == 'Y' && !insurCommercialAmount) {
      msg.emit('app:tip', { text: '请填写商业险' });
      return;
    }
    if (insurCompulsoryFlag == 'Y' && !insurCompulsoryAmount) {
      msg.emit('app:tip', { text: '请填写交强险' });
      return;
    }
    if (!taxAmount) {
      msg.emit('app:tip', { text: '请填写车船税' });
      return;
    }
    if (!policyUrls[0]) {
      msg.emit('app:tip', { text: '请上传保单' });
      return;
    }

    let params = {
      applicationNo: applicationInsuranceDetail.applicationNo,
      insurCommercialFlag,
      insurCommercialAmount,
      insurCompulsoryFlag,
      insurCompulsoryAmount,
      insurAmount,
      taxAmount,
      insurAllAmount,
    };
    params.policyUrls = policyUrls.map(item => {
      return item.url;
    });
    api.insurance.applicationUploadPolicy(params).then((res) => {
      if (res.success) {
        msg.emit('router: goToNext', {
          routeName: 'InsuranceFeedBack',
          status: 1,
          headerTitle: '上传结果',
          title: '电子保单上传成功',
          desc: '我们会对您上传的电子保单进行核实，预估1-3个工作日',
          routerFrom: 'InsuranceUpload'
        });
        setTimeout(() => {
          msg.emit('router: refreshRoute', {
            routeName: 'InsuranceFeedBack',
          });
        }, 100);
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };

  // 我的申请详情
  getApplicationInsuranceDetail = (id) => {
    api.insurance.applicationInsuranceDetail(id).then((res) => {
      if (res.success) {
        this.setState({ applicationInsuranceDetail: res.data });
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };

  onChange = (key, val) => {
    this.setState({ [key]: val });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    alignItems: 'center',
  },
  scrollContainer: {
    alignItems: 'center',
    paddingBottom: px2dp(80),
  },
  btnWrap: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
  },
});
